<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>展示航行地图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
    <style type="text/css">
        /* 去掉百度地图logo */
        .anchorBL {
            display: none;
        }
    </style>
</head>
<body>
<!---->
<div style="margin: 5px; height: 700px;">
    <!--百度地图容器-->
    <div style="height:100%;border:#ccc solid 1px;" id="dituContent"></div>
</div>

<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请ak"></script>-->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<input type="hidden" th:value="${navigationName}" id="navigationName">

<!--序号自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use(['jquery', 'table'], function () {

        var navigationName = $('#navigationName').val();
        // 统一点位数组(用来调整最佳位置用的)
        var totalPointArr = [];
        // 时间（索引是pageNum）
        var timeArr = [];
        // 速度（索引是pageNum）
        var speedArr = [];
        // 模式（索引是pageNum）
        var modeArr = [];
        // 航向（索引是pageNum）
        var courseArr = [];

        //百度地图API
        var map = new BMap.Map("dituContent");
        map.centerAndZoom(new BMap.Point(116.405419, 39.915156), 13);
        map.enableScrollWheelZoom(true);                            //启动滚轮放大缩小
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

        dynamicDrawMap();

        /**
         * 动态获取点位，并绘图（每次获取最多1000个点位）
         */
        function dynamicDrawMap() {

            // 查询第一页
            var pageNum = 1;
            var body = getRoutePoint(pageNum);
            if (typeof body == 'undefined' || body == null) {
                return;
            }
            // 绘制第1次
            var pointArr = getPointArr(body.list, null, pageNum);
            // 获取总页数
            var totalPage = body.totalPage;
            // 如果只有1页的话，
            if (totalPage == 1) {
                drawLine(pointArr, pageNum, true);
                return;
            } else {
                drawLine(pointArr, pageNum);
            }
            // 还有剩余页数进行遍历
            for (; pageNum <= totalPage; pageNum++) {
                // 需要记住上一次的最后一个点
                var pointLastArr = pointArr[pointArr.length - 1];
                // 再次请求
                var body2 = getRoutePoint(pageNum);
                if (typeof body2 == 'undefined' || body2 == null) {
                    return;
                }
                // 获取剩下的点位
                pointArr = getPointArr(body2.list, pointLastArr, pageNum);
                // 绘制
                if (pageNum == totalPage) {
                    drawLine(pointArr, pageNum, true);
                } else {
                    drawLine(pointArr, pageNum);
                }
            }
        }

        /**
         * 画路线图
         *
         * @param pointArr 路线数组
         * @param pageNum  第几页
         * @param isLast 是否是最后一个
         */
        function drawLine(pointArr, pageNum, isLast) {
            if (typeof pointArr == "undefined" || pointArr == null || pointArr.length <= 0) {
                return;
            }
            // 连线
            var polyline = new BMap.Polyline(pointArr, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});
            map.addOverlay(polyline);
            var label1 = new BMap.Label("起点" + pageNum);
            // 第1个点的红标记
            var m1 = new BMap.Marker(pointArr[0]);
            m1.setLabel(label1);
            map.addOverlay(m1);
            // 点击显示弹窗
            m1.addEventListener("click", function () {
                this.openInfoWindow(getInfoWindow(pointArr[0].lng, pointArr[0].lat, pageNum - 1));
            });
            // 调整到最佳视野
            totalPointArr = totalPointArr.concat(pointArr);
            map.setViewport(totalPointArr);
            // 最后一个点的红标记
            if (isLast) {
                var m2 = new BMap.Marker(pointArr[pointArr.length - 1]);
                var label2 = new BMap.Label("终点");
                m2.setLabel(label2);
                map.addOverlay(m2);
                // 点击显示弹窗
                m2.addEventListener("click", function () {
                    this.openInfoWindow(getInfoWindow(pointArr[pointArr.length - 1].lng, pointArr[pointArr.length - 1].lat, pageNum));
                });
            }
        }

        /**
         * 获取弹窗
         *
         * @param lng 经度
         * @param lat 纬度
         * @param index 索引
         */
        function getInfoWindow(lng, lat, index) {
            var mode = modeArr[index];
            var modeStr = "";
            if (mode == MODE_NAVIGATION) {
                modeStr = "<p><i class='el-icon-s-custom'></i>&nbsp;模式：&nbsp;" + "<span style='color: #47bae1;'>航行模式</span></p>";
            } else if (mode == MODE_WANDER) {
                modeStr = "<p><i class='el-icon-s-custom'></i>&nbsp;模式：&nbsp;" + "<span style='color: #a17ee1;'>漂浮模式</span></p>";
            } else if (mode == MODE_ANCHOR) {
                modeStr = "<p><i class='el-icon-s-custom'></i>&nbsp;模式：&nbsp;" + "<span style='color: #e17473'>锚泊模式</span></p>";
            } else if (mode == MODE_SINGLE_CIRCLE) {
                modeStr = "<p><i class='el-icon-s-custom'></i>&nbsp;模式：&nbsp;" + "<span style='color: #e18906;'>单点循环</span></p>";
            }
            // 点击展示信息弹窗
            var content = "<p><i class='el-icon-s-custom'></i>&nbsp;时间：&nbsp;" + timeArr[index] + "</p>" +
                "<p><i class='el-icon-s-custom'></i>&nbsp;坐标：&nbsp;" + lng + "，" + lat + "</p>" +
                "<p><i class='el-icon-s-custom'></i>&nbsp;速度：&nbsp;" + speedArr[index] + "</p>" +
                "<p><i class='el-icon-s-custom'></i>&nbsp;航向：&nbsp;" + courseArr[index] + "</p>" +
                modeStr;
            return new BMap.InfoWindow(content);
        }

        /**
         * 查询当前航行点点位
         */
        function getRoutePoint(pageNum) {
            var body;
            $.ajax({
                type: "POST",
                url: ctx + "/navigationRecord/getNavigationPointMap",
                contentType: "application/json",
                dataType: "json",
                async: false,// 非异步
                data: JSON.stringify({
                    "pageNum": pageNum,
                    "pageSize": 500,
                    "navigationName": navigationName
                }),
                success: function (response) {
                    if (response.result.code == 200) {
                        body = response.body;
                    }
                },
                error: function (e) {
                    console.log("ERROR: ", e);
                }
            });
            return body;
        }

        /**
         * 获取点位数组
         *
         * @param list 点位集合
         * @param pointLastArr 最后一个点位
         * @param pageNum 第几页
         * @return 坐标数组
         */
        function getPointArr(list, pointLastArr, pageNum) {
            var pointArr = [];
            if (typeof list != "undefined" && list != null && list.length > 0) {
                // 先把最后一个点位加在前面
                if (typeof pointLastArr != 'undefined' && pointLastArr != null) {
                    pointArr.push(pointLastArr);
                }
                // 转成百度坐标点位
                list.forEach(function (item, index) {
                    if (!isEmpty(item.longitude) && !isEmpty(item.latitude)) {
                        pointArr.push(new BMap.Point(item.longitude, item.latitude))
                    }
                    // 只记录第一个点的信息
                    if (index == 0) {
                        timeArr[pageNum - 1] = item.createTime;
                        speedArr[pageNum - 1] = item.speed;
                        modeArr[pageNum - 1] = item.mode;
                        courseArr[pageNum - 1] = item.course;
                    }
                    // 最后一个点
                    if (index == list.length - 1) {
                        timeArr[pageNum] = item.createTime;
                        speedArr[pageNum] = item.speed;
                        modeArr[pageNum] = item.mode;
                        courseArr[pageNum] = item.course;
                    }

                });
            }
            return pointArr;
        }

    });
</script>

</body>
</html>
